import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';

import { Form, Input } from 'antd';

import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelectObj } from '@/components/DropDownSelect/index';

import { DICT } from '../enum';

import { UmiComponentProps, SearchComponentProps } from '@/common/type';

const FormItem = Form.Item;

interface P {
  dict?: any;
  cond?: {
    ownerId: string;
    pageSize: number;
    pageNum: number;
  };
}

type Props = P & UmiComponentProps & SearchComponentProps;

@connect(({ analyse_risk }) => ({
  dict: analyse_risk.dict || {},
  cond: analyse_risk.cond || {},
}))
class Search extends Component<Props, any> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'analyse_risk/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    });
  }

  private search = (e)  => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err: undefined | {}, values: {}) => {
      if (!err) {
        dispatch({
          type: 'analyse_risk/updateCond',
          payload: {
            ...values
          }
        });
        this.props.initCurrent()
      }
    });
  };

  private handleChange = (type: string, value: number | string) => {
    const { cond = {}, dispatch } = this.props;
    cond[type] = value;

    dispatch({
      type: 'analyse_risk/updateRecordCond',
      payload: cond
    })
  }

  render() {
    const { form, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={4} >
            <FormItem
              label="名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name', {
                rules: [{ message: '输入名称' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入名称" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={4}>
            <FormItem
              label="原因"
              {...formItemLayout}
            >
              {getFieldDecorator('reason')(
                DropDownSelectObj({ 
                  dict, type: 'device.charging.state', 
                  onChange: (v) => this.handleChange('reason', +v) 
                })
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={4} span={16} >
            <SearchRow type="flex" justify="end">
              <SearchButton htmlType="submit" icon='search'>搜索</SearchButton>
              <SearchButton icon='redo' onClick={(e) => {
                this.props.form.resetFields();
                this.search(e)
              }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
              {this.props.new && <Link to='/data/analyse_risk/new' style={{ marginLeft: '15px' }}>
                <SearchButton icon='plus' type="primary">新增</SearchButton>
              </Link>}
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
